<template>
	<view class="m-page">
		<Header></Header>
		<view class="m-page-content">
			<view class="m-page-content-pc">
				<view :class="['m-page-content-pc-title flex-center alic',pageData.titleClass]">
					<view :class="['setting-title-image',pageData.t &&'setting-title-image-bg']" :style="{marginTop:'2px'}">
						<u-image v-if="pageData.t" src="@/static/images/common/t.png"  mode="widthFix" width="22" height="22"></u-image>
						<u-icon  v-else-if="pageData.m" name="bell-fill" color="#17B6FF" size="32"></u-icon>  
						<u-image v-else src="@/static/images/setting/setting-title-icon.png"  mode="widthFix" width="32" height="32"></u-image>
					</view>
					<view class="setting-title-txt fwb" v-if="!pageData.diy">
						设置 {{pageData.showBrand?'/ '+ pageData.title:''}}
					</view>
					<view class="setting-title-txt fwb" v-else>
						<u-icon style="display: inline-block;" v-if="pageData.m && isMobile" 
						name="bell-fill" color="#17B6FF" size="20"></u-icon>{{ pageData.title }}
					</view>
				</view>
				<view :class="['m-page-main']" :style="{padding:mPaddingClone}">
					<view class="m-page-main-brand flex-start-nowrap fz14 fwb" v-if="pageData.showBrand">
						<text class="c26 cup" @click="goBack">{{pageData.brand || '设置'}}</text> > {{pageData.title}}
					</view>
					<view class="fwb" v-if="pageData.subTitle" style="margin-bottom: 20px;">
						基本信息
					</view>
					<view class="m-page-main-title flex-start-nowrap c26" v-if="!pageData.showTips">
						<u-icon name="info-circle-fill" color="#17B6FF" size="14"></u-icon>  
						<text style="margin-left: 5px;  ">{{loginInfo[pageData.tips] || '为了您的账号安全，请补充完整信息'}}</text>
					</view>
					<slot class="" name="content"></slot>
				</view>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import Header from "@/components/Header/Header.vue"
	import Footer from "@/components/Footer/Footer.vue"
	export default {
		name:"m-page",
		props: {
			pageData: {
				type: Object,
				default:()=>{} 
			},
			mPadding:{
				type:String,
				default:'40px'
			}
		},
		components:{Header,Footer},
		data() {
			return {
				mPaddingClone:''
				// loginInfo:{}
			};
		},
		watch:{
			mPadding(val){
				this.mPaddingClone = val
			}
		},
		mounted() {
			this.mPaddingClone = this.mPadding
			if(this.isMobile){
				this.mPaddingClone = this.mPadding == '40px'?'40rpx':this.mPadding
			}
			uni.setNavigationBarTitle({
				title:this.pageData.title +'-宅小职'
			})
		},
		methods: {
			goBack() {
				this.utils.goBack()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fz14{
		font-size:14px;
	}
	page{
		
	}
	.m-page{
		height: 100vh;
		overflow: auto;
		
		&-content{
			min-height: calc(100vh - 110px - 62px);
			&-pc{
				margin: 40px auto;
				width: 976px;
				
				background: #FFFFFF;
				box-shadow: 0px 2px 8px 0px rgba(48, 51, 59, 0.1);
				&-title{
					height: 104px;
					border-bottom: 1px solid #EEF1F5;
					font-size: 28px;
					line-height: 1;
					.setting-title-txt{
						vertical-align: middle;
					}
					.setting-title-image{
						margin-right: 5px;
					}
					.setting-title-image-bg{
						background: $c26;
						padding: 2px;
					}
				}
			}
			&-mb{
				
			}
			
		}
		
		&-main{
			min-height: 600px;
			overflow-x: hidden;
			&-brand{
				margin-bottom: 30px;
			}
			&-title{
				background: #f3fbfe;
				line-height: 1.5;
				padding:30rpx 20rpx;
				font-size: 10px;
				align-items: center;
			}
		}
		
	}
	@media screen and (min-width: 0px) and (max-width:1024px){
		.m-page{
			&-content{
				&-pc{
					width: 100%;
					margin: 0;
					box-shadow: none;
					&-title{
						height: 104rpx;
						font-size: 36rpx;
						.setting-title-txt{
						}
						.setting-title-image{
							display: none;
						}
					}
				}
			}
			&-main{
				padding: 15rpx 20rpx ;
				&-title{
					// align-items: flex-start;
					// transform: scale(.9);
					.u-icon{
						// padding-top: 3px;
					}
				}
				&-brand{
					display:none !important;
				}
			}
		}
	}
	.disn{
		display: none;
	}
</style>